<template>
	<view>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="">
				<view class="m-2 pl-3 bg-white rounded-20">
					<view class="border-bottom d-flex py-3">
						<view class="">收货人:</view>
						<view class="ml-3"><input type="text" :value="mapLists.consignee" :consignee="consignee"  @input="consignee_input" /></view>
					</view>
					<view class="d-flex py-3">
						<view class="">手机号:</view>
						<view class="ml-3"><input type="text" :value="mapLists.mobile" :mobile="mobile" @input="mobile_input" /></view>
					</view>
				</view>
				<view class="m-2 pl-3 bg-white rounded-20">
					<view class="border-bottom d-flex py-3 j-sb" @click="btnClick">
						<view class="">
							<view class="">所在城市:</view>
						</view>
						<view class="mr-3 d-flex">
							<view class="mr-2">{{address_name?address_name:address_default}}</view>
							<u-icon name="arrow-right" size="35"></u-icon>
						</view>
					</view>
					<view class="d-flex py-3">
						<view class="">详细地址:</view>
						<view class="mx-3 flex-1"><input type="text" :minute="minute"  :value="mapLists.address" @input="minute_input" /></view>
					</view>
				</view>
			</view>
			
			<view class="bg-white py-2 w-100 position-fixed bottom-0 btn">
				<button type="warn" @click="hold">保存</button>
			</view>
		</view>
		<!-- 改价 -->
		<u-popup v-model="bottomShow" width="100%" height="80%" mode="bottom" border-radius="14" closeable="true" close-icon="close" close-icon-pos="top-right" close-icon-size="40">
			<view class="">
				<view class="eradders"></view>
				<view class="eradders position-fixed top-0  w-100 bg-white">
					<view class="py-2 border-bottom">
						<view class="font-md d-flex j-center a-center">请选择所在地区</view>
					</view>
					<view class="d-flex address" >
						<view class="py-3 mx-2"  v-if="province_name" @click="province_tab()">
							<view  class="font-weight" >{{province_name}}</view>
						</view>
						<view class="py-3 mx-2"  v-if="city_name" @click="city_tab(items_province)">
							<view class="font-weight">{{city_name}}</view>
						</view>
						<view class="py-3 mx-2"  v-if="county_name" @click="county_tab(items_city)">
							<view class="font-weight">{{county_name}}</view>
						</view>
						<view class="py-3 mx-2" :class="street_show?'active_tab':''" v-if="street_name">
							<view class="font-weight">{{street_name}}</view>
						</view>
						<view class="ml-2 py-3 active_tab" v-if="please">请选择</view>
					</view>
				</view>
				
				<!-- 省 -->
				<view v-show="address_show" class="content_address mx-2 pt-4" v-for="(item,index) in addressList" :key="index" @click="province(item)">
						{{item.name}}
				</view>
				<!-- 市 -->
				<view v-show="province_show" class="content_address mx-2 pt-4" v-for="(item,index) in provinceList" :key="index" @click="city(item)">
						{{item.name}}
				</view>
				<!-- 县区 -->
				<view v-show="city_show" class="content_address mx-2 pt-4" v-for="(item,index) in cityList" :key="index" @click="county(item)">
						{{item.name}}
				</view>
				<!-- 街道 -->
				<view v-show="county_show" class="content_address mx-2 pt-4 d-flex j-sb" v-for="(item,index) in countyList" :key="index" @click="street(item)">
					<view class="" :class="item.id==street_id?'active':''" >
						{{item.name}}
					</view>
					<view class="" v-show="item.id==street_id">
						<u-icon name="checkmark" color="#ff1515" size="33"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bottomShow:false,
				minute:"", // 详细地址
				consignee:"", // 收货人
				mobile:"", // 手机号
				mapLists:"", // 编辑地址的详情
				order_id:0,
	
				addressTab:"", // 地址tabbar
				addressList:"", // 地址列表
				address_show:false,
				
				province_show:false,
				city_show:false,
				county_show:false,
				
				provinceList:"", // 省的列表
				province_name:"", // 省 的名字
				cityList:"", // 市的列表
				city_name:"" ,// 市的名字
				countyList:"", // 县区的列表
				county_name:"" ,// 县区的名字
				street_name:"", // 街道名字
				street_id:"", // 街道id
				address_name:"", // 地址
				address_default:"", // 默认地址
				
				please:false,
				street_show:false,
				
				items_province:"",
				items_city:"",
				items_county:"",
				items_street:"",
				u_loadmore:true, // 加载中
			}
		},
		methods: {
			// 收货人
			consignee_input(e){
				this.consignee=e.detail.value
			},
			// 手机号
			mobile_input(e){
				this.mobile=e.detail.value
			},
			// 详细地址
			minute_input(e){
				this.minute=e.detail.value
			},
			// 地址弹框
			btnClick() {
			    this.bottomShow=true
			},
			// 省
			province(items){
				this.items_province=items
				this.address_show=!this.address_show
				this.province_name=items.name
				
				this.province_show=true
				this.please=true
				console.log(items)
				this.$H.post("v2/store/shop/region",{
					type:2,
					parent_id:items.parent_id,
					}).then(res=>{
						let arr=res.data.regions
						this.provinceList=arr.filter((item,index)=>{
							if(items.id==item.parent_id){
								return item
							}
						})
				})
					
			},
			//  市
			city(items){
				this.items_city=items
				this.city_show=true
				this.province_show=!this.province_show
				this.city_name=items.name
				
				console.log(items)
				this.please=true
				if(this.city_name==this.province_name){
					this.province_name=""
				}else{
					this.$H.post("v2/store/shop/region",{
						type:3,
						parent_id:items.parent_id,
						}).then(res=>{
							let arr=res.data.regions
							this.cityList=arr.filter((item,index)=>{
								if(items.id==item.parent_id){
									return item
								}
						})
					})
				}
			},
			// 县区
			county(items){
				this.items_county=items
				this.county_show=true
				this.county_name=items.name
				this.city_show=false
				
				this.please=true
				this.street_show=true
				this.$H.post("v2/store/shop/region",{
					type:4,
					parent_id:items.parent_id,
					}).then(res=>{
						let arr=res.data.regions
						console.log(res)
						this.countyList=arr.filter((item,index)=>{
							if(items.id==item.parent_id){
								return item
							}
						})
				})
			},
			// 街道
			street(items){
				this.items_street=items
				this.street_name=items.name
				
				this.street_id=items.id
				this.please=false
				console.log(items)
				this.bottomShow=false
				this.address_name=(this.province_name+this.city_name+this.county_name+this.street_name)
			},
			// 省 
			province_tab(items){
				this.county_name=""
				this.street_name=""
				this.city_name=""
				
				this.address_show=true
				this.province_show=false
				this.city_show=false
				this.county_show=false
				this.please=true
			},
			// 市
			city_tab(items){
				this.county_name=""
				this.street_name=""
				
				this.street_id=""
				this.county_show=false
				this.city_show=false
				this.province_show=true
				this.please=true
				this.$H.post("v2/store/shop/region",{
					type:2,
					parent_id:items.parent_id,
					}).then(res=>{
						let arr=res.data.regions
						this.provinceList=arr.filter((item,index)=>{
							if(items.id==item.parent_id){
								return item
							}
						})
				})
			},
			// 县区
			county_tab(items){
				this.street_name=""
				
				this.street_id=""
				this.county_show=false
				this.city_show=true
				this.please=true
				
				this.$H.post("v2/store/shop/region",{
					type:3,
					parent_id:items.parent_id,
					}).then(res=>{
						let arr=res.data.regions
						this.cityList=arr.filter((item,index)=>{
							if(items.id==item.parent_id){
								return item
							}
						})
				})
			},
			
			// 保存
			hold(){
				this.$H.post("admin/order/operate/consignee",{
					order_id:this.order_id,
					address:this.minute || this.mapLists.address, // 详细地址
					consignee:this.consignee || this.mapLists.consignee, // 收货人
					country_id:this.mapLists.country_id, // 国家id
					province_id:this.items_province.id||this.mapLists.province_id, // 省份id
					city_id:this.items_city.id||this.mapLists.city_id, // 城市id
					district_id:this.items_county.id||this.mapLists.district_id, // 地区id
					mobile:this.mobile || this.mapLists.mobile // 手机号
				}).then(res=>{
					uni.navigateBack({
						delta:1
					})
				})
			}
		},
		onLoad(e) {
			this.order_id=e.order_id
			this.$H.post("admin/order/operate/shipping/detail",{order_id:e.order_id}).then(res=>{
				this.mapLists=res.data
				this.address_default=`${res.data.province}${res.data.city}${res.data.district}`
			})
			this.$H.post("v2/store/shop/region",{
				device:"",
				client:uni.getStorageSync("client"),
				code:5002,udid:"",
				type:1,parent_id:this.mapLists.province_id,
			}).then(res=>{
				this.address_show=true
				this.please=true
				this.addressList=res.data.regions
				this.u_loadmore=false 
			})
		}
	}
</script>

<style>
	.btn /deep/ button{
		width: 85%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.address{
		border-bottom: 1px solid #eaeaea;
	}
	.content_address{
		height: 100%;
	}
	.eradders{
		height: 185upx;
	}
	.active_tab{
		color: #ff3333;
		border-bottom: 3px solid #ff3333;
	}
</style>
